<script setup>
import axios from 'axios';
import { onMounted, ref, reactive } from 'vue';
import { ElMessage } from 'element-plus';

const viewData = ref([]);
const para = ref({
    departmentNum: null,
    departmentName: null
});

const obj = ref({
    departmentNum: null,
    departmentName: null,
    introduce: null
});

const isUpdate = ref(false);
const showDialog = ref(false);
const pageInfo = reactive({
    pageNum: 1,
    pageSize: 5,
    total: 0
});

const handleUpdate = (row) => {
    obj.value.departmentNum = row.departmentNum;
    obj.value.departmentName = row.departmentName;
    obj.value.introduce = row.introduce;
    obj.value.id = row.id;

    isUpdate.value = true;
    showDialog.value = true;
};

const handleDelete = (row) => {
    axios({
        url: "/api/department/delete/" + row.id,
        method: "delete"
    }).then((resp) => {
        if (resp.data.code === 200) {
            ElMessage.info(`删除${row.departmentName}成功`);
            getList();
        } else {
            console.log("出现逻辑异常:", resp);
        }
    }).catch((e) => {
        console.log("出现异常:", e);
    });
};

let getList = () => {
    axios({
        method: "POST",
        url: `/api/department/getList`,
        data: {
            ...para.value,
            ...pageInfo
        }
    }).then((resp) => {
        if (resp.data.code === 200) {
            viewData.value = resp.data.data.list;
            pageInfo.total = resp.data.data.count ? resp.data.data.count : 0;
        } else {
            ElMessage.error(resp.data.msg);
            console.log("出现逻辑异常:", resp);
        }
    }).catch((e) => {
        console.log("出现异常:", e);
    })
};

const selectobj = () => {
    getList();
};

const addobj = () => {
    obj.value.departmentNum = null;
    obj.value.departmentName = null;
    obj.value.introduce = null;

    isUpdate.value = false;
    showDialog.value = true;
};

const submitData = () => {
    const axiosPara = {
        data: obj.value
    };

    if (isUpdate.value) {
        axiosPara.method = "PATCH";
        axiosPara.url = "/api/department/update";
    } else {
        axiosPara.method = "POST";
        axiosPara.url = "/api/department/add";
    }

    axios(axiosPara).then((resp) => {
        if (resp.data.code === 200) {
            showDialog.value = false;
            getList();
        } else {
            ElMessage.error(resp.data.msg);
            console.log("出现逻辑异常:", resp);
        }
    }).catch((e) => {
        console.log("出现异常:", e);
    });

};

onMounted(() => {
    getList();
});
</script>

<template>
    <header class="header">
        <div class="wrapper">
            <div>
                <span>部门编号:</span>
                <el-input v-model="para.departmentNum" size="small"></el-input>
            </div>
            <div>
                <span>部门名称:</span>
                <el-input v-model="para.departmentName" size="small"></el-input>
            </div>
        </div>
        <div class="w-button">
            <el-button @click="selectobj">查询</el-button>
            <el-button @click="addobj">新增</el-button>
        </div>
    </header>
    <main>
        <el-table :data="viewData">
            <el-table-column prop="departmentNum" label="部门编号"></el-table-column>
            <el-table-column prop="departmentName" label="部门名称"></el-table-column>
            <el-table-column prop="introduce" label="部门简介"></el-table-column>
            <el-table-column label="操作">
                <template #default="scope">
                    <el-button size="small" @click="handleUpdate(scope.row)">修改</el-button>
                    <el-button size="small" type="danger" @click="handleDelete(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
    </main>
    <footer>
        <el-pagination v-model:current-page="pageInfo.pageNum" v-model:page-size="pageInfo.pageSize"
            :page-sizes="[5, 10, 20, 50]" layout="total, sizes, prev, pager, next, jumper" :total="pageInfo.total"
            @size-change="getList" @current-change="getList" />

    </footer>
    <el-dialog v-model="showDialog">
        <div>
            <span>部门编号:</span>
            <el-input v-model="obj.departmentNum"></el-input>
        </div>
        <div>
            <span>部门名称:</span>
            <el-input v-model="obj.departmentName"></el-input>
        </div>
        <div>
            <span>部门简介:</span>
            <el-input v-model="obj.introduce"></el-input>
        </div>
        <el-button @click="submitData">提交</el-button>
    </el-dialog>
</template>

<style scoped>
.header {
    display: flex;
    flex-direction: column;
}

.wrapper {
    display: flex;
    flex-direction: row;
}

.wrapper>div {
    display: flex;
    flex-direction: row;
    margin-right: 1vw;
    gap: 0.5vw;
}

.wrapper>div>span {
    flex: 0 0 auto;
    /* flex-basis: auto; */
    /* flex-shrink: 0; */
}

.w-button {
    display: flex;
    flex-direction: row;
}

.w-button>button {
    margin-right: 1vw;
}
</style>